// 创建问卷-基础信息表单

<template>
    <div>
        <el-form 
        :model="form"
        :label-width="label_width"
        :style="form_style"
        >
            <!-- 问卷名称 -->
            <el-form-item
            label="问卷名称"
            prop="name"
            class="item_style"
            :rules="[{
                required: true, message: '请输入问卷名称', trigger: 'blur'
            },{
                min: 2, max:40, message: '问卷名称在2-40之间', trigger: 'blur'
            }]"
            >
                <el-input 
                v-model="form.name"
                :style="name_input_style"
                />
            </el-form-item>

            <!-- 开始时间 -->
            <el-form-item 
            label="开始时间" 
            class="item_style"
            :rules="[{
                required: true, message: '请选择开始时间', trigger: 'blur'
            }]"
            >
                <el-col :span="11">
                    <el-form-item 
                    prop="start_date"
                    :rules="[{
                        required: true, message: '请选择日期', trigger: 'blur'
                    }]"
                    >
                        <el-date-picker 
                        type="date" 
                        placeholder="选择日期" 
                        v-model="form.start_date" 
                        style="width: 100%;font-size:18px"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col class="line" :span="2">--</el-col>
                <el-col :span="11">
                    <el-form-item 
                    prop="start_time"
                    :rules="[{
                        required: true, message: '请选择时间', trigger: 'blur'
                    }]"
                    >
                        <el-time-picker
                        placeholder="选择时间" 
                        v-model="form.start_time" 
                        style="width: 100%;font-size:18px"
                        >
                        </el-time-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>

            <!-- 结束时间 -->
            <el-form-item 
            label="结束时间" 
            class="item_style"
            :rules="[{
                required: true, message: '请选择结束时间', trigger: 'blur'
            }]"
            >
                <el-col :span="11">
                    <el-form-item 
                    prop="end_date"
                    >
                        <el-date-picker 
                        type="date" 
                        placeholder="选择日期" 
                        v-model="form.end_date" 
                        style="width: 100%;font-size:18px"
                        :rules="[{
                        required: true, message: '请选择日期', trigger: 'blur'
                        }]"
                        >
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col class="line" :span="2">--</el-col>
                <el-col :span="11">
                    <el-form-item 
                    prop="end_time"
                    >
                        <el-time-picker 
                        placeholder="选择时间" 
                        v-model="form.end_time" 
                        style="width: 100%;font-size:18px"
                        :rules="[{
                            required: true, message: '请选择时间', trigger: 'blur'
                        }]"
                        >
                        </el-time-picker>
                    </el-form-item>
                </el-col>
            </el-form-item>

            <!-- 是否公开 -->
            <el-form-item 
            label="是否公开" 
            class="item_style"
            :rules="[{
                required: true, message: '请选择是否公开', trigger: 'blur'
            }]"
            >
                <el-select v-model="form.public" placeholder="请选择">
                    <el-option label="公开" value="公开"></el-option>
                    <el-option label="非公开" value="非公开"></el-option>
                </el-select>
            </el-form-item>

            <!-- 是否匿名 -->
            <el-form-item 
            label="是否匿名" 
            class="item_style"
            :rules="[{
                required: true, message: '请选择是否匿名', trigger: 'blur'
            }]"
            >
                <el-select v-model="form.anonymous" placeholder="请选择">
                    <el-option label="记名" value="记名"></el-option>
                    <el-option label="匿名" value="匿名"></el-option>
                </el-select>
            </el-form-item>

            <!-- 提醒 -->
            <el-form-item 
            label="设置提醒" 
            prop="remind" 
            class="item_style"
            >
                <el-checkbox-group v-model="form.remind" style="font-size:18px">
                    <el-checkbox label="短信提醒"></el-checkbox>
                    <el-checkbox label="协同提醒"></el-checkbox>
                </el-checkbox-group>
            </el-form-item>

            <!-- 问卷描述 -->
            <el-form-item
            label="问卷描述"
            prop="desc"
            class="item_style"
            :rules="[{
                min: 2, max: 80, message: '问卷描述在2-80之间', trigger: 'blur'
            }]"
            >
                <el-input
                type="textarea"
                v-model="form.desc"
                :style="name_input_style"
                />
            </el-form-item>
            <slot></slot>
            <!-- {{form}} -->
        </el-form>
    </div>
</template>

<script>

    export default {
        components: {
        },
        props:{

            form_style: {
                type: Object,
                default(){
                return {}
                }
            },
            model: {
                type: Object,
                default(){
                return {}
                }
            },
            label_width: {
                type: String,
                default: '120px'
            },
            name: {
                type: String,
                default: ''
            },
            label_style: {
                type: Object,
                default(){
                return {fontSize:'18px'}
                }
            },
            name_input_style: {
                type: Object,
                default(){
                return {fontSize:'18px'}
                }
            },
            form: {
                type: Object,
                default(){
                    return{
                        name:'',
                        start_date:'',
                        start_time:'',
                        end_date:'',
                        end_time:'',
                        public:'',
                        anonymous:'',
                        remind:[],
                        desc:'',
                        in_script:''
                    }
                }
            }
            

        },
        data() {
            return{}
        }
    }
</script>

<style>
    /* label样式 */
    label.el-form-item__label {
        font-size: 18px;
        font-weight:bold;
    }

    .item_style {
        width: 80%;
        margin-bottom: 50px;
    }

    .line {
        text-align: center;
    }

    /* 下拉框 */
    .el-input__inner {
    font-size: 18px;
    }
    .el-select-dropdown__item {
    font-size: 18px;
    }

    /* 多选选项的勾选框 */
    .el-checkbox__inner {
        border: 1px solid #ac7cc9;
        width: 18px;
        height: 18px;
    }
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #ac7cc9;
        border-color: #ac7cc9;
    }
    .el-checkbox__input.is-checked+.el-checkbox__label {
        color: #9260b0;
    }
    .el-checkbox__label {
        font-size: 18px;
    }
</style>